import download from '@/utils/download';
import { Button, Card, Form, Input, InputNumber, Select } from 'antd';
import React, { useEffect, useState } from 'react';
const tpls = [
  {
    label: '林俊杰',
    value: '001'
  }, {
    label: '喜羊羊',
    value: '002'
  }
]
const App = () => {
  let [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const onOk = async () => {
    const data = await form.validateFields()
    setLoading(true)
    try {
      await download(`https://all-round.weillan.com/api/internal/mock/video`, data, {
        method: 'POST',
        downloadName: data.fileName
      })
    } catch (error) {

    }
    setLoading(false)
  }
  const genFileName = () => {
    const data = form.getFieldsValue()
    const item = tpls.find(item => item.value === data.tpl)
    form.setFieldValue('fileName', `${item.label}-${data.duration}s.${data.format}`)
  }
  useEffect(() => {
    genFileName()
    // setTimeout(()=>genFileName(),300)
    
  }, [])
  return (<Card>
    <Form

      style={{ width: 500, margin: '0 auto' }}
      initialValues={{
        tpl: '001',
        format: 'MP4',
        duration: '1',
      }}
      form={form} labelCol={{ span: 4 }}>
      <Form.Item label='模板' name='tpl' >
        <Select onChange={genFileName} options={tpls} />
      </Form.Item>

      <Form.Item label='时长' name='duration'>
        <InputNumber onChange={genFileName} style={{ width: '100%' }} addonAfter="秒" />
      </Form.Item>
      <Form.Item label='格式' name='format'>
        <Select onChange={genFileName} options={[{
          label: 'MP4',
          value: 'mp4'
        }]} />
      </Form.Item>
      <Form.Item label='文件名' name='fileName'>
        <Input />
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 4 }} name='duration'>
        <Button loading={loading} onClick={onOk} type='primary' block>下载</Button>
      </Form.Item>
    </Form>
  </Card>)
}
export default App